import React, {PureComponent} from 'react'
import WithRouter from "../hoc/WithRouter";
import {Outlet} from "react-router-dom";

export class Popular extends PureComponent {

    constructor(props) {
        super(props);

        this.state = {
            songs: [
                {id: 1, name: "song1"},
                {id: 2, name: "song1"},
                {id: 3, name: "song1"},
            ]
        }
    }

    songDetail(id) {
        console.log("id", this.props.router.navigate)
        console.log(id)
        const {navigate} = this.props.router
        console.log(navigate)
        navigate(`/home/popular/detail/${id}`)
    }

    render() {

        const {songs} = this.state
        return (
            <div>
                <h2>Popular</h2>
                <Outlet/>
                <ul>
                    {
                        songs.map(song => {
                            return <li key={song.id} onClick={e => this.songDetail(song.id)}>{song.name}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default WithRouter(Popular)